<template>
  <div class="content-main">
    <ul>
      <li v-for="item in arr" :key="item.id" @click="giveId(item.id)">
        <div class="img"><img :src="baseUrl + item.image_path" alt="" /></div>
        <div class="right">
          <div class="header">
            <h5>
              <span class="pin">品牌</span><span>{{ item.name }}</span>
            </h5>
            <i>保 准 典</i>
          </div>
          <div>
            <div class="twoRight">
              <van-rate
                :size="12"
                v-model="starValue"
                allow-half
                void-icon="star"
                color="#fe980a"
                void-color="#eee"
              /><span class="yellow"> {{ item.rating }}</span>
              <span>月售{{ item.recent_order_num }}单</span>
            </div>
            <div class="twoLeft">
              <span class="blue">蜂鸟专送</span
              ><span class="write">准时达</span>
            </div>
          </div>
          <div>
            <div class="threeLeft">
              ${{ item.float_minimum_order_amount }}起送 / 派送费约${{
                item.float_delivery_fee
              }}元
            </div>
            <div class="threeRight">
              <span>{{ item.distance }}/</span
              ><span class="bue">{{ item.order_lead_time }}</span>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    arr: {
      type: Array,
    },
  },
  data() {
    return {
      starValue: 5,
      imgUrl: [],
      baseUrl: "//elm.cangdu.org/img/",
    };
  },
  methods: {
    giveId(id) {
      console.log(41);
      this.$emit("toshop", id);
    },
  },
};
</script>

<style lang="less" scoped>
.content-main {
  border-bottom: 1px solid #ccc;
  height: 100%;
  ul {
    height: 89px;
    li {
      .img {
        width: 80px;
        img {
          width: 100%;
        }
      }
      padding-top: 5px;
      display: flex;
      height: 100%;
      .right {
        height: 100%;
        width: 100%;
        > div {
          height: 33.33%;
          display: flex;
          justify-content: space-between;
          padding: 0 10px;
        }
        h5 {
          .pin {
            background-color: #ffdb36;
            font-size: 12px;
          }
        }
        i {
          font-size: 12px;
          color: #c0c3ca;
          line-height: 30px;
        }
        .twoRight {
          line-height: 30px;
          height: 30px;
          font-size: 16px;
          .yellow {
            color: #fe980a;
            font-size: 16px;
          }
          span {
            font-size: 14px;
            color: #a3a398;
          }
        }
        .twoLeft {
          line-height: 30px;
          .blue {
            background-color: #308fe8;
            color: #fff;
            font-size: 12px;
          }
          .write {
            font-size: 12px;
            color: #308fe8;
            border: 1px solid #308fe8;
            line-height: 33.33%;
          }
        }
        .threeLeft {
          font-size: 12px;
          line-height: 30px;
        }
        .threeRight {
          font-size: 12px;
          line-height: 40px;
          .bue {
            color: #308fe8;
          }
          span {
            color: #b1b1b0;
          }
        }
      }
    }
  }
}
</style>